
<!--用来存放文件信息-->
<input id="pickfilesid" type="hidden" name="{{name}}" value="{{val}}"/>
    {%if config.ext.attachment.type == 2%}
<link rel="stylesheet" href="/static/admin/js/qiniu/main.css" type="text/css">
    <div id="container">
        <a class="btn btn-default " id="pickfiles" href="#" >
            <i class="glyphicon glyphicon-plus"></i>
            <span>选择文件</span>
        </a>
    </div>
    <div style="display:none" id="success" >
        <div class="alert-success">
            队列全部文件处理完毕
        </div>
    </div>
    <div >
        <table id="filetable" class="table table-striped table-hover text-left" data-id=""   style="margin-top:10px;display:{{'none' if val ==0}}">
            <thead>
            <tr>
                <th class="col-md-4">文件</th>
                <th class="col-md-2">大小</th>
                <th class="col-md-6">详情 <a href="#" class="text-info pull-right" id="delfile">删除</a> </th>
            </tr>
            </thead>
            <tbody id="fsUploadProgress">
            {%if val != 0%}
            <tr  class="progressContainer" style="opacity: 1;">
                <td class="progressName">{{val|get_file('name',false)}}<div class="Wrapper default"><div class="imgWrapper col-md-3"><img src="/static/admin/js/qiniu/default.png"></div></div></td>
                <td class="progressFileSize">{{val|get_file('size',false)}} kb</td>
                <td><div class="info"><div class=""><div><strong>Link:</strong><a target="_blank" href="{{val|get_file('savename',true)}}"> {{val|get_file('savename',true)}}</a></div>
                    <div class="hash"><strong>Hash:</strong>{{val|get_file('sha1',false)}}</div></div>
                </div></td></tr>
            {%endif%}
            </tbody>
        </table>
    </div>
<!--七牛-->
<script>
    var module = 'adminfile';
</script>
<input type="hidden" id="domain" value="{{2|get_pdq}}/">
<script type="text/javascript" src="/static/admin/js/qiniu/plupload.full.min.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/zh_CN.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/qiniu.min.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/ui.js"></script>
<script type="text/javascript" src="/static/admin/js/qiniu/main.js"></script>
<!--七牛-->
    {%else%}
<link rel="stylesheet" href="/static/admin/js/webuploader/webuploader.css" type="text/css">
    <div id="thelist_{{name}}" class="uploader-list"></div>
    <div class="btns" id="file_list_hine">
        <div id="picker_{{name}}" class="picker">选择文件</div>
        <a id="ctlBtn_{{name}}" class="btn btn-default">开始上传</a>
    </div>
    <div class="hidden alert alert-success" id="file_list_show">
        <button data-dismiss="alert" id="file_list_show_close" class="close" type="button">×</button>
    </div>
<script src="/static/admin/js/webuploader/webuploader.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function() {
            var $ = jQuery,
                $list_{{name}} = $('#thelist_{{name}}'),
                $btn_{{name}} = $('#ctlBtn_{{name}}'),
                state = 'pending',
                uploader_{{name}};
            // 使用异步请求的方式
            var file_id = $("input[name={{name}}]").val();
            if(file_id!=0){
              $.get('/ext/attachment/adminfile/fileinfo',{id:file_id},function (data) {
                if(data!=null){
                  $('#file_list_hine').hide();
                  $('#file_list_show').removeClass('hidden').append(
                    `<p>文件名称:&nbsp${data.name}</p>`+
                    `<p>文件大小:&nbsp${data.size}</p>`+
                    `<p>上传时间:&nbsp${data.time}</p>`);
                  $('#file_list_show_close').click(function () {
                    $('#file_list_hine').show();
                    $('#file_list_show').addClass('hidden')
                  });
                }
              });
            }
            uploader_{{name}} = WebUploader.create({

                // 不压缩image
                resize: false,

                // swf文件路径
                swf:'/static/admin/js/webuploader/Uploader.swf',

                // 文件接收服务端。
                server: '/ext/attachment/adminfile/upload',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: {
                    id:'#picker_{{name}}',
                    multiple: false
                },
                fileNumLimit:1,

            });

            // 当有文件添加进来的时候
            uploader_{{name}}.on( 'fileQueued', function( file ) {

                $list_{{name}}.html( '<div id="' + file.id + '" class="alert alert-info">' +
                    ' <button data-dismiss="alert" class="close remove-this" type="button">×</button>'+
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
                var $li_{{name}} = $( '#'+file.id );
                $li_{{name}}.on('click', '.remove-this', function() {
                    uploader_{{name}}.removeFile( file.id );
//                                                                                 $list_{{name}}.html("");
                })

            });

            // 文件上传过程中创建进度条实时显示。
            uploader_{{name}}.on( 'uploadProgress', function( file, percentage ) {
                var $li_{{name}} = $( '#'+file.id ),
                    $percent_{{name}} = $li_{{name}}.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent_{{name}}.length ) {
                    $percent_{{name}} = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li_{{name}} ).find('.progress-bar');
                }

                $li_{{name}}.find('p.state').text('上传中');

                $percent_{{name}}.css( 'width', percentage * 100 + '%' );
            });

            uploader_{{name}}.on( 'uploadSuccess', function( file,res ) {
                var name = "{{name}}";
                $("input[name="+name+"]").val(res.id);
                $( '#'+file.id ).find('p.state').text('已上传,文件大小:'+res.size);
            });

            uploader_{{name}}.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader_{{name}}.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            uploader_{{name}}.on( 'all', function( type ) {
                if ( type === 'startUpload' ) {
                    state = 'uploading';
                } else if ( type === 'stopUpload' ) {
                    state = 'paused';
                } else if ( type === 'uploadFinished' ) {
                    state = 'done';
                }

                if ( state === 'uploading' ) {
                    $btn_{{name}}.text('暂停上传');
                } else {
                    $btn_{{name}}.text('开始上传');
                }
            });

            $btn_{{name}}.on( 'click', function() {
                if ( state === 'uploading' ) {
                    uploader_{{name}}.stop();
                } else {
                    uploader_{{name}}.upload();
                }
            });
        });

    </script>
    {%endif%}
